<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>



      <el-form-item label="商品类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择商品类型" clearable>
          <el-option
            v-for="dict in goods_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="运营模式" prop="operationMode">
        <el-select v-model="queryParams.operationMode" placeholder="请选择运营模式" clearable>
          <el-option
            v-for="dict in operation_mode"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="" clearable>
          <el-option
            v-for="dict in goods_suspend_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['product:goods:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['product:goods:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['product:goods:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['product:goods:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" :columns="columns" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="goodsList" @selection-change="handleSelectionChange" @sort-change="changeTableSort">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="品牌" align="center" sortable="custom" v-if="columns[0].visible" prop="wbname" />
      <el-table-column label="名称" align="center" sortable="custom" v-if="columns[1].visible" prop="wgname" />
      <el-table-column label="分类" align="center" sortable="custom" v-if="columns[2].visible" prop="wcname" />
      <el-table-column label="门店" align="center" sortable="custom" v-if="columns[3].visible" prop="wppname" />
      <el-table-column label="押金" align="center" sortable="custom" v-if="columns[4].visible" prop="deposit" />
      <el-table-column label="价格" align="center" sortable="custom" v-if="columns[5].visible" prop="price" />
      <el-table-column label="商品类型" align="center" sortable="custom" v-if="columns[6].visible" prop="type">
        <template #default="scope">
          <dict-tag :options="goods_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="车主" align="center" sortable="custom" v-if="columns[7].visible" prop="carOwner" />
      <el-table-column label="所有人" align="center" sortable="custom" v-if="columns[8].visible" prop="wuname" />
      <el-table-column label="车价" align="center" sortable="custom" v-if="columns[9].visible" prop="carPrice" />
      <el-table-column label="运营模式" align="center" sortable="custom" v-if="columns[10].visible" prop="operationMode">
        <template #default="scope">
          <dict-tag :options="operation_mode" :value="scope.row.operationMode"/>
        </template>
      </el-table-column>
      <el-table-column label="代租截止" align="center" sortable="custom" v-if="columns[11].visible" prop="agentEndtime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.agentEndtime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交强险到期时间" align="center" sortable="custom" v-if="columns[12].visible" prop="jiaoqiangEnd" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.jiaoqiangEnd, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>


      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="1"
            inactive-value="0"
            @change="changeSwitchStatus($event,scope.row)"
          />
          <!-- <dict-tag :options="goods_suspend_status" :value="scope.row.status"/> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="CopyDocument" @click="copyPruduct(scope.row)" v-hasPermi="['product:goods:copyGoods']">复制</el-button>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['product:goods:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['product:goods:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>




    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商品管理对话框 -->
    <el-dialog :title="title" v-model="open" width="50vw" append-to-body :close-on-click-modal="false">
      <el-form ref="goodsRef" :model="form" :rules="rules" label-width="120px">
        <el-card>
          <template v-slot:header>
            <div class="card-header">
              <h3 class="clearfix">设备信息</h3>
              <el-radio-group v-model="form.type">
                <el-radio
                  v-for="dict in goods_type"
                  :key="dict.value"
                  :label="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </div>
          </template>
          <el-row :gutter="20">

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="权重" prop="weigh">
                <el-input v-model="form.weigh" type="number" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="品牌" prop="bandId">
                <inputsearch :changeValue="changeBandValue" :inputName="'id'" :inputValue="form.bandId" :list="showBandList" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="描述" prop="desc">
                <el-input v-model="form.desc" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="分类" prop="categoryId">
                <inputsearch :changeValue="changeClassValue" :inputName="'id'" :inputValue="form.categoryId" :list="showClassList" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.type == 0">
              <el-form-item label="车牌号">
                <el-input v-model="form.carNumber" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item :label="form.type == 0 ? '车架号' : '设备号'">
                <el-input v-model="form.chassisNumber" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item :label="form.type == 0 ? '取车点' : '取货点'" prop="pickPointId">
                <inputsearch :changeValue="changeAddressValue" :inputName="'id'" :inputValue="form.pickPointId" :list="showAddressList" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.type != 0">
              <el-form-item label="单价">
                <el-input v-model="form.carPrice" type="number" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="价格" prop="price">
                <el-input v-model="form.price" placeholder="请输入价格" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.type == 0">
              <el-form-item label="车价">
                <el-input v-model="form.carPrice" type="number" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="押金" prop="deposit">
                <el-input v-model="form.deposit" placeholder="请输入押金" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.type == 0">
              <el-form-item label="超限费">
                <el-input v-model="form.overflowMileagePrice" type="number" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.type == 0">
              <el-form-item label="车主">
                <el-input v-model="form.carOwner" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="所有人">
                <inputsearch :changeValue="changeUserValue" :inputName="'userId'" :inputValue="form.realOwner" :list="showUserList" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="运营模式" prop="operationMode">
                <el-select v-model="form.operationMode" style="flex:1" placeholder="请选择类型">
                  <el-option label="自营" :value="0"></el-option>
                  <el-option label="代租" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.operationMode == 1">
              <el-form-item label="分拥比例">
                <el-input v-model="form.agentCommission" type="number" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" v-if="form.operationMode == 1">
              <el-form-item label="代租截止">
                <el-date-picker clearable
                  v-model="form.agentEndtime"
                  type="date"
                  value-format="YYYY-MM-DD"
                  style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                  <el-radio
                    v-for="dict in goods_suspend_status"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="热门" prop="isHot">
                  <el-radio-group v-model="form.isHot">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
              </el-form-item>
            </el-col>

          </el-row>
        </el-card>

        <!-- 折扣与里程 -->
        <el-card style="margin-top: 10px;">
          <template v-slot:header>
            <div class="card-header">
              <h3 class="clearfix">{{form.type == 0 ? '折扣与里程' : '折扣'}}</h3>
            </div>
          </template>
          <el-row :gutter="20">

            <el-col :xs="4" :sm="4" :lg="4">
              <el-form-item class="disp"></el-form-item>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4" class="disp">
              <h4>1-2天</h4>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4" class="disp">
              <h4>3-6天</h4>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4" class="disp">
              <h4>7-14天</h4>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4" class="disp">
              <h4>15-29天</h4>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4" class="disp">
              <h4>30天以上</h4>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :xs="4" :sm="4" :lg="4">
              <div>优惠价</div>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.twoPrice" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.sixPrice" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.fourteenPrice" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.twentyninePrice" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.maxPrice" type="number" />
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 10px;" v-if="form.type == 0">
            <el-col :xs="4" :sm="4" :lg="4">
              <div>限制里程</div>
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.twoMileage" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.sixMileage" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.fourteenMileage" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.twentynineMileage" type="number" />
            </el-col>
            <el-col :xs="4" :sm="4" :lg="4">
              <el-input v-model="form.maxMileage" type="number" />
            </el-col>

          </el-row>
        </el-card>

        <!-- 保险信息 -->
        <el-card style="margin-top: 10px;" v-if="form.type == 0">
          <template v-slot:header>
            <div class="card-header">
              <h3 class="clearfix">保险信息</h3>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="6" :sm="6" :lg="6">
              <el-form-item class="disp"></el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="disp">
              <h4>交强险</h4>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="disp">
              <h4>三者险</h4>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="disp">
              <h4>驾意险</h4>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :xs="6" :sm="6" :lg="6">
              <div>保额</div>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-input v-model="form.jiaoqiangLimit" type="number" />
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-input v-model="form.sanzheLimit" type="number" />
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-input v-model="form.jiayixianLimit" type="number" />
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 10px;">
            <el-col :xs="6" :sm="6" :lg="6">
              <div>费用</div>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-input v-model="form.jiaoqiangFee" type="number" />
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-input v-model="form.sanzheFee" type="number" />
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-input v-model="form.jiayixianFee" type="number" />
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 10px;">
            <el-col :xs="6" :sm="6" :lg="6">
              <div>到期时间</div>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-date-picker clearable
                v-model="form.jiaoqiangEnd"
                type="date"
                style="width: 100%;"
                value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-date-picker clearable
                v-model="form.sanzheEnd"
                type="date"
                style="width: 100%;"
                value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-date-picker clearable
                v-model="form.jiayixianEnd"
                type="date"
                style="width: 100%;"
                value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-col>
          </el-row>

        </el-card>

        <!-- 保养 -->
        <el-card style="margin-top: 10px;" v-if="form.type == 0">
          <template v-slot:header>
            <div class="card-header">
              <h3 class="clearfix">保养</h3>
            </div>
          </template>
          <el-row :gutter="20" style="margin-top: 10px;">
            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="上次保养里程">
                <el-input v-model="form.lastTimeMaintenance" type="number" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="上次保养时间">
                <el-date-picker clearable
                  v-model="form.lastTimeMaintenTime"
                  type="date"
                  value-format="YYYY-MM-DD"
                  style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="保养周期">
                <el-input v-model="form.maintenanceCycle" type="number" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 指定价格 -->
        <el-card style="margin-top: 10px;">
          <template v-slot:header>
            <div class="card-header">
              <h3 class="clearfix">指定价格</h3>
            </div>
          </template>
          <el-calendar>
            <template #date-cell="{ data }">
              <div class="disp-col">
                {{ data.day.split('-').slice(1).join('-') }}
                <input v-model="form.datePrice[data.day]" placeholder="价格" style="margin-top: 12px;width: 100%;" />
              </div>
            </template>
          </el-calendar>
        </el-card>

        <!-- 图片 -->
        <el-card style="margin-top: 10px;">
          <template v-slot:header>
            <div class="card-header">
              <h3 class="clearfix">图片</h3>
            </div>
          </template>
          <el-row :gutter="20" style="margin-top: 10px;">
            <el-col  :xs="24" :sm="24" :lg="24">
              <el-form-item label="首页图片">
                <image-upload v-model="form.image" :limit="9" :isShowTip="false"/>
              </el-form-item>
            </el-col>
            <el-col  :xs="24" :sm="24" :lg="24">
              <el-form-item label="预约界面图片">
                <image-upload v-model="form.descImage" :limit="9" :isShowTip="false"/>
              </el-form-item>
            </el-col>
            <el-col  :xs="24" :sm="24" :lg="24">
              <el-form-item label="分类页面图片">
                <image-upload v-model="form.categoryImage" :limit="9" :isShowTip="false"/>
              </el-form-item>
            </el-col>
            <el-col  :xs="24" :sm="24" :lg="24">
              <el-form-item label="相似推荐图">
                <image-upload v-model="form.recomImage" :limit="9" :isShowTip="false"/>
              </el-form-item>
            </el-col>
            <el-col  :xs="24" :sm="24" :lg="24">
              <el-form-item label="实拍图">
                <image-upload v-model="form.images" :limit="9" :isShowTip="false"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>


        <!-- 
        <el-form-item label="商品类型:0=摩托车,1=影像设备,2=骑行设备" prop="type">
          <el-select v-model="form.type" placeholder="请选择商品类型:0=摩托车,1=影像设备,2=骑行设备">
            <el-option
              v-for="dict in goods_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号" prop="carNumber">
          <el-input v-model="form.carNumber" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="车架号" prop="chassisNumber">
          <el-input v-model="form.chassisNumber" placeholder="请输入车架号" />
        </el-form-item>
        <el-form-item label="车主" prop="carOwner">
          <el-input v-model="form.carOwner" placeholder="请输入车主" />
        </el-form-item>
        <el-form-item label="车价" prop="carPrice">
          <el-input v-model="form.carPrice" placeholder="请输入车价" />
        </el-form-item>
        <el-form-item label="车辆里程" prop="carMileage">
          <el-input v-model="form.carMileage" placeholder="请输入车辆里程" />
        </el-form-item>
        <el-form-item label="状态:0=下架,1=可租" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in goods_suspend_status"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Goods">
import { listGoods, getGoods, delGoods, addGoods, updateGoods, copyGoods, changeGoodsStatus } from "@/api/product/goods";
import { listsBand } from "@/api/product/band";
import { listsCategory } from "@/api/product/category";
import { listsPoint } from "@/api/operate/point";
import { listsUser } from "@/api/userInfo/group";
import inputsearch from "@/components/inputsearch";
import { ElMessage, ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance();
const { goods_suspend_status, goods_type, operation_mode } = proxy.useDict('goods_suspend_status', 'goods_type', 'operation_mode');

const columns = ref([
  { key: 0, label: `品牌`,prop: 'wbname', visible: true },
  { key: 1, label: `名称`,prop: 'wgname', visible: true },
  { key: 2, label: `分类`,prop: 'wcname', visible: true },
  { key: 3, label: `门店`,prop: 'wppname', visible: true },
  { key: 4, label: `押金`,prop: 'deposit', visible: true },
  { key: 5, label: `价格`,prop: 'price', visible: true },
  { key: 6, label: `商品类型`,prop: 'type', visible: true },
  { key: 7, label: `车主`,prop: 'carOwner', visible: true },
  { key: 8, label: `所有人`,prop: 'wuname', visible: true },
  { key: 9, label: `车价`,prop: 'carPrice', visible: true },
  { key: 10, label: `运营模式`,prop: 'operationMode', visible: true },
  { key: 11, label: `代租截止`,prop: 'agentEndtime', visible: true },
  { key: 12, label: `交强险到期时间`,prop: 'jiaoqiangEnd', visible: true }
]);
const goodsList = ref([]);
const showBandList = ref([]);                           // 品牌列表
const showClassList = ref([]);                          // 分类列表
const showAddressList = ref([]);                        // 取货点列表
const showUserList = ref([]);                           // 所有人列表
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    categoryId: '',
    pickPointId: '',
    bandId: '',
    name: null,
    deposit: null,
    desc: null,
    price: null,
    twoPrice: null,
    twoMileage: null,
    sixPrice: null,
    sixMileage: null,
    fourteenPrice: null,
    fourteenMileage: null,
    twentyninePrice: null,
    twentynineMileage: null,
    maxPrice: null,
    maxMileage: null,
    overflowMileagePrice: null,
    isHot: null,
    type: null,
    image: null,
    descImage: null,
    categoryImage: null,
    recomImage: null,
    images: null,
    carNumber: null,
    chassisNumber: null,
    carOwner: null,
    realOwner: '',
    carPrice: null,
    maintenanceCycle: null,
    lastTimeMaintenance: null,
    lastTimeMaintenTime: null,
    operationMode: null,
    jiayixianLimit: null,
    jiayixianFee: null,
    jiayixianEnd: null,
    sanzheLimit: null,
    sanzheFee: null,
    sanzheEnd: null,
    jiaoqiangLimit: null,
    jiaoqiangFee: null,
    jiaoqiangEnd: null,
    agentEndtime: null,
    carMileage: null,
    weigh: null,
    status: null,
    agentCommission: null,
    datePrice: {},
    orderByColumn: null,
    isAsc: null
  },
  rules: {
    categoryId: [
      { required: true, message: "分类不能为空", trigger: "blur" }
    ],
    pickPointId: [
      { required: true, message: "取车点不能为空", trigger: "blur" }
    ],
    bandId: [
      { required: true, message: "品牌不能为空", trigger: "blur" }
    ],
    name: [
      { required: true, message: "名称不能为空", trigger: "blur" }
    ],
    deposit: [
      { required: true, message: "押金不能为空", trigger: "blur" }
    ],
    desc: [
      { required: true, message: "描述不能为空", trigger: "blur" }
    ],
    twoPrice: [
      { required: true, message: "1-2天内价格不能为空", trigger: "blur" }
    ],
    twoMileage: [
      { required: true, message: "1-2天里程不能为空", trigger: "blur" }
    ],
    sixPrice: [
      { required: true, message: "3-6天内价格不能为空", trigger: "blur" }
    ],
    sixMileage: [
      { required: true, message: "3-6天里程不能为空", trigger: "blur" }
    ],
    fourteenPrice: [
      { required: true, message: "7-14天内价格不能为空", trigger: "blur" }
    ],
    fourteenMileage: [
      { required: true, message: "7-14天里程不能为空", trigger: "blur" }
    ],
    twentyninePrice: [
      { required: true, message: "15-29天内价格不能为空", trigger: "blur" }
    ],
    twentynineMileage: [
      { required: true, message: "15-29天里程不能为空", trigger: "blur" }
    ],
    maxPrice: [
      { required: true, message: "30天以上价格不能为空", trigger: "blur" }
    ],
    maxMileage: [
      { required: true, message: "30天以上里程不能为空", trigger: "blur" }
    ],
    overflowMileagePrice: [
      { required: true, message: "超限费不能为空", trigger: "blur" }
    ],
    isHot: [
      { required: true, message: "热门:0=否,1=是不能为空", trigger: "blur" }
    ],
    type: [
      { required: true, message: "商品类型:0=摩托车,1=影像设备,2=骑行设备不能为空", trigger: "change" }
    ],
    descImage: [
      { required: true, message: "预约界面图片不能为空", trigger: "blur" }
    ],
    categoryImage: [
      { required: true, message: "分类页面图片不能为空", trigger: "blur" }
    ],
    recomImage: [
      { required: true, message: "相似推荐图不能为空", trigger: "blur" }
    ],
    carNumber: [
      { required: true, message: "车牌号不能为空", trigger: "blur" }
    ],
    chassisNumber: [
      { required: true, message: "车架号不能为空", trigger: "blur" }
    ],
    carOwner: [
      { required: true, message: "车主不能为空", trigger: "blur" }
    ],
    realOwner: [
      { required: true, message: "所有人不能为空", trigger: "blur" }
    ],
    carPrice: [
      { required: true, message: "车价不能为空", trigger: "blur" }
    ],
    maintenanceCycle: [
      { required: true, message: "保养周期不能为空", trigger: "blur" }
    ],
    lastTimeMaintenance: [
      { required: true, message: "上次保养里程不能为空", trigger: "blur" }
    ],
    operationMode: [
      { required: true, message: "运营模式:0=自营,1=代租不能为空", trigger: "blur" }
    ],
    jiayixianLimit: [
      { required: true, message: "驾意险保额不能为空", trigger: "blur" }
    ],
    jiayixianFee: [
      { required: true, message: "驾意险费用不能为空", trigger: "blur" }
    ],
    sanzheLimit: [
      { required: true, message: "三者险保额不能为空", trigger: "blur" }
    ],
    sanzheFee: [
      { required: true, message: "三者险费用不能为空", trigger: "blur" }
    ],
    jiaoqiangLimit: [
      { required: true, message: "交强险保额不能为空", trigger: "blur" }
    ],
    jiaoqiangFee: [
      { required: true, message: "交强险费用不能为空", trigger: "blur" }
    ],
    carMileage: [
      { required: true, message: "车辆里程不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询商品管理列表 */
function getList() {
  loading.value = true;
  listGoods(queryParams.value).then(response => {
    goodsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 品牌列表 */
function getBandList() {
  listsBand({
    pageNum: 1,
    pageSize: 10000
  }).then(response => {
    showBandList.value = response.rows.map(e => {
      e.value = e.name
      return e
    });
  });
}
/** 分类列表 */
function getClassList() {
  listsCategory({
    pageNum: 1,
    pageSize: 10000
  }).then(response => {
    showClassList.value = response.rows.map(e => {
      e.value = e.name
      return e
    });
  });
}
/** 取货点列表 */
function getAddressList() {
  listsPoint({
    pageNum: 1,
    pageSize: 10000
  }).then(response => {
    showAddressList.value = response.rows.map(e => {
      e.value = e.name
      return e
    });
  });
}
/** 所有人列表 */
function getUserList() {
  listsUser({
    pageNum: 1,
    pageSize: 10000
  }).then(response => {
    showUserList.value = response.rows.map(e => {
      e.value = e.name
      return e
    });
  });
}
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    categoryId: '',
    pickPointId: '',
    bandId: '',
    name: null,
    deposit: null,
    desc: null,
    price: null,
    twoPrice: null,
    twoMileage: null,
    sixPrice: null,
    sixMileage: null,
    fourteenPrice: null,
    fourteenMileage: null,
    twentyninePrice: null,
    twentynineMileage: null,
    maxPrice: null,
    maxMileage: null,
    overflowMileagePrice: null,
    isHot: null,
    type: null,
    image: null,
    descImage: null,
    categoryImage: null,
    recomImage: null,
    images: null,
    carNumber: null,
    chassisNumber: null,
    carOwner: null,
    realOwner: '',
    carPrice: null,
    maintenanceCycle: null,
    lastTimeMaintenance: null,
    lastTimeMaintenTime: null,
    operationMode: 0,
    jiayixianLimit: null,
    jiayixianFee: null,
    jiayixianEnd: null,
    sanzheLimit: null,
    sanzheFee: null,
    sanzheEnd: null,
    jiaoqiangLimit: null,
    jiaoqiangFee: null,
    jiaoqiangEnd: null,
    agentEndtime: null,
    carMileage: null,
    createTime: null,
    updateTime: null,
    weigh: null,
    status: null,
    agentCommission: null,
    datePrice: {}
  };
  proxy.resetForm("goodsRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.orderByColumn = null
  queryParams.value.isAsc = null
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加商品管理";
}

/** 复制按钮操作 */
function copyPruduct(row) {
  const _id = row.id || ids.value
  ElMessageBox.confirm(
    '是否复制该商品?',
    '提示',
    {
      confirmButtonText: '复制',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      copyGoods(_id).then(response => {
        proxy.$modal.msgSuccess("复制成功");
        getList();
      });
    })
    .catch(() => {
      // ElMessage({
      //   type: 'info',
      //   message: 'Delete canceled',
      // })
    })
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getGoods(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改商品管理";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["goodsRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateGoods(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addGoods(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

// 修改状态
function changeSwitchStatus(e,row) {
  changeGoodsStatus({
    id: row.id,
    status: e
  }).then(response => {
    proxy.$modal.msgSuccess("修改成功");
    // getList();
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除商品管理编号为"' + _ids + '"的数据项？').then(function() {
    return delGoods(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('product/goods/export', {
    ...queryParams.value
  }, `goods_${new Date().getTime()}.xlsx`)
}

// 改变品牌选择值
const changeBandValue = (request) => {
  form.value.bandId = request.id
}

// 改变分类选择值
const changeClassValue = (request) => {
  form.value.categoryId = request.id
}

// 改变取货点选择值
const changeAddressValue = (request) => {
  form.value.pickPointId = request.id
}

// 改变所有人选择值
const changeUserValue = (request) => {
  form.value.realOwner = request.userId
}

// 改变排序
function changeTableSort(e){
  if(e.order){
    queryParams.value.orderByColumn = e.prop
    queryParams.value.isAsc = e.order == 'descending' ? 'desc' : 'asc'
  }else{
    queryParams.value.orderByColumn = null
    queryParams.value.isAsc = null
  }
  handleQuery()
}

getList();
getBandList();
getClassList();
getAddressList();
getUserList();
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.disp{
  display: flex;
  justify-content: center;
}

.disp-col{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>